<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>

<template>
  <div>
    <Row :gutter="10">
      <Card>
        <div class="table-head">
          <div class="left">
            <Select v-model="typeSelectid" :transfer="true" @on-change="onChangeTypeSelect">
              <Option v-for="item in typeSelect" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          <Button type="primary" class="Button" @click="user_retiredFun()">离退休设置</Button>
        </div>
        <Row class="margin-top-10">
          <Table stripe border :columns="columns" :data="data" @on-row-click="onRowData"></Table>
        </Row>
        <div style="margin: 10px;overflow: hidden;height: 36px;">
          <div style="float: right;">
            <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
          </div>
        </div>
      </Card>
      <Modal :width="600" title="详情"
             v-model="showCurrentTableData"
             ok-text="确定"
             cancel-text="取消"
             @on-ok=""
             @on-cancel=""
             class-name="vertical-center-modal"
             class="Modal-Detail-div">
        <Form label-position="top">
          <FormItem label="姓名">
            <div class="dataDetail-div" v-text="dataDetail.name"></div>
          </FormItem>
          <FormItem label="性别" v-if="dataDetail.sex">
            <div class="dataDetail-div" v-text="dataDetail.sex"></div>
          </FormItem>
          <FormItem label="年龄" v-if="dataDetail.age">
            <div class="dataDetail-div" v-text="dataDetail.age"></div>
          </FormItem>
          <FormItem label="出生日期" v-if="dataDetail.birthday">
            <div class="dataDetail-div" v-text="dataDetail.birthday"></div>
          </FormItem>
          <FormItem label="身份证号" v-if="dataDetail.idcard">
            <div class="dataDetail-div" v-text="dataDetail.idcard"></div>
          </FormItem>
          <FormItem label="手机号" v-if="dataDetail.mobile">
            <div class="dataDetail-div" v-text="dataDetail.mobile"></div>
          </FormItem>
          <FormItem label="部门" v-if="dataDetail.deps">
            <div class="dataDetail-div" v-text="dataDetail.deps"></div>
          </FormItem>
          <FormItem label="身份" v-if="dataDetail.station">
            <div class="dataDetail-div" v-text="dataDetail.station.title"></div>
          </FormItem>
          <FormItem label="在职状态" v-if="dataDetail.status">
            <div class="dataDetail-div" v-text="dataDetail.status.title"></div>
          </FormItem>
          <FormItem label="离退休时间" v-if="dataDetail.expect_retired_date">
            <div class="dataDetail-div" v-text="dataDetail.expect_retired_date"></div>
          </FormItem>
        </Form>
      </Modal>
      <!--设置-->
      <Drawer :closable="false" :width="DrawerWidth" v-model="user_retired" class="Drawer-body">
        <p class="Drawer_pStyle">离退休设置</p>
        <div class="body">
          <Form label-position="top">
            <FormItem label="男退休年龄">
              <InputNumber :max="100" :min="1" v-model="InfoObj.male_age" class="InputNumber"></InputNumber>
            </FormItem>
            <FormItem label="女退休年龄">
              <InputNumber :max="100" :min="1" v-model="InfoObj.female_age" class="InputNumber"></InputNumber>
            </FormItem>
            <FormItem label="默认离退休提醒时间">
              <Select v-model="InfoObj.remind" :transfer="true" style="width:100%;">
                <Option v-for="item in remindArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <FormItem label="离退休查询时间">
              <Select v-model="InfoObj.listTime" :transfer="true" style="width:100%;">
                <Option v-for="item in listTimeArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Form>
        </div>
        <div class="footer" :style="{width: DrawerWidth - 32 + 'px'}">
          <Button type="text" @click="hideuser_retired">取消</Button>
          <Button type="info" :loading="saveLoading" @click="saveuser_retired">保存</Button>
        </div>
      </Drawer>
    </Row>
  </div>
</template>

<script>
  import Util from '../../libs/util';
  export default {
    components: {},
    data () {
      return {
        total: 0,
        page: 1,
        size: 10,
        typeSelectid: 'onjob',
        typeSelect: [
          {
            id: 'onjob',
            name: '离退休人员',
          },
          {
            id: 'retired',
            name: '已退休人员',
          }
        ],
        id: '',
        searchConName: '',
        searchConTel: '',
        user_retired: false,
        showCurrentTableData: false,
        loading: false,
        saveLoading: false,
        showCurrentColumns: [],
        editInlineAndCellData: [],
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'name',
            title: '姓名',
          },
          {
            key: 'department_name',
            title: '部门',
          },
          {
            key: 'time',
            title: '离退休日期',
          },
          /*{
           title: 'Action',
           key: 'action',
           width: 150,
           align: 'center',
           render: (h, params) => {
           return h('div', [
           h('Button', {
           props: {
           type: 'primary',
           size: 'small'
           },
           style: {
           marginRight: '5px'
           },
           on: {
           click: () => {
           var data = params.row;
           this.show(params.index, data);
           }
           }
           }, '详情'),
           /!*h('Button', {
           props: {
           type: 'error',
           size: 'small'
           },
           on: {
           click: () => {
           //this.remove(params.index)
           }
           }
           }, '删除')*!/
           ]);
           }
           }*/
        ],
        data: [],
        dataDetail: {},
        initTable: [],
        DrawerWidth: Util.constant.DrawerWidth,// 抽屉的宽度
        WindowWidth: Util.constant.WindowWidth,// 窗口的宽度
        WindowHeight: Util.constant.WindowHeight,// 窗口的高度
        InfoObj: {
          male_age: 60,
          female_age: 60,
          remind: 'no',
          listTime: '1',
          id: '',
        },
        uid: '', // 登录用户的userId
        save_loading: false,
        remindArr: [
          {
            id: 'no',
            name: '不提醒'
          },
          {
            id: 'month',
            name: '一个月'
          },
          {
            id: 'year',
            name: '一年'
          }
        ],
        listTimeArr: [
          {
            id: '1',
            name: '一年'
          },
          {
            id: '2',
            name: '两年'
          },
          {
            id: '3',
            name: '三年'
          },
          {
            id: '5',
            name: '五年'
          }
        ],
      };
    },
    mounted () {
      this.getData();
    },
    methods: {
      onChangeTypeSelect: function (val) {
        var _this = this;
        _this.typeSelectid = val;
        _this.page = 1;
        _this.getData();
      },
      getData () {
        var _this = this;
        var data = {
          type: _this.typeSelectid,
          //state: '2',
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          page: _this.page,
          size: _this.size,
        };
        var params = {
          url: '/user/retired/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.total = res.rows;
            _this.data = _data;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      handleSearch () {
        var _this = this;
        _this.page = 1;
        var searchConName = _this.searchConName;
      },
      changePage (page) {
        var _this = this;
        console.log('page', page);
        _this.page = page;
        _this.getData();
      },
      onRowData: function (data, index) {
        var _this = this;
        _this.show(index, data);
      },
      show: function (index, data) {
        var _this = this;
        var id = data.id;
        _this.id = id;

        var data = {
          id: _this.id,
        };
        var params = {
          url: '/user/query',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            var sex = _data.sex;
            if (sex == 'male') {
              _data.sex = '男';
            } else if (sex == 'female') {
              _data.sex = '女';
            }
            var departments = _data.departments;
            var dep_arr = [];
            for (var k in departments) {
              if (!departments[k]) {
                continue;
              }
              var name = departments[k].name;
              dep_arr.push(name);
            }
            _data.deps = dep_arr.join(' ， ');
            _this.dataDetail = _data;
            _this.showCurrentTableData = true;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      asyncOK: function () {
        var _this = this;
        _this.showCurrentTableData = false;
      },
      // 设置
      user_retiredFun: function () {
        var _this = this;
        _this.getuser_retired();
        _this.user_retired = true;
      },
      // 取消设置
      hideuser_retired: function () {
        var _this = this;
        _this.user_retired = false;
      },
      // 查询设置
      getuser_retired: function () {
        var _this = this;
        var data = {};
        var params = {
          url: '/retired/query',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data;
            var id = data.id;
            var list_time = data.list_time;
            var remind = data.remind;
            var female_age = data.female_age;
            var male_age = data.male_age;
            _this.InfoObj.listTime = list_time.toString();
            _this.InfoObj.id = id;
            _this.InfoObj.remind = remind;
            _this.InfoObj.female_age = female_age;
            _this.InfoObj.male_age = male_age;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 保存设置
      saveuser_retired: function () {
        var _this = this;
        if (!_this.InfoObj.male_age) {
          _this.$Message.error('请填写男退休年龄!');
          return false;
        }
        if (!_this.InfoObj.female_age) {
          _this.$Message.error('请填写女退休年龄!');
          return false;
        }
        var data = {
          id: _this.InfoObj.id,
          male_age: _this.InfoObj.male_age,
          female_age: _this.InfoObj.female_age,
          remind: _this.InfoObj.remind,
          listTime: _this.InfoObj.listTime,
        };
        var params = {
          url: '/retired/setup',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.save_loading = true;
        function _successFun(res) {
          _this.save_loading = false;
          if (res.result == 0) {
            var _data = res.data || {};
            _this.$Message.success('保存成功!');
            _this.user_retired = false;
          } else {
            _this.$Message.error('保存失败!');
          }
        }
      },
    }
  };
</script>
